<template>
  <div class="p-3">
    <a-card style="height: 820px" :bodrder="false">
      <div class="text-right">
        <a-button type="primary">新增</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :pagination="pagination"
        class="mt-5"
      >
        <template #bodyCell="{ column }">
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link">编辑</a-button>
            <a-popconfirm
              placement="bottom"
              ok-text="是"
              cancel-text="否"
              title="确认删除吗？"
            >
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
const columns = [
  {
    title: '机构名称',
    dataIndex: '',
    key: '',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
  },
];
const dataSource = ref([]);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    // onSearch();
  },
});
</script>
<style scoped></style>
